<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-09-11 11:20:26
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-10-14 14:26:07
 * @FilePath: \web-components-box\components\equation\EquationTerm.vue
 * @Description: 方程的项 - 回显
-->
<script setup lang="ts">
import { type ExpressionTerm, type VariableTermElement } from '~/types/equation'

const props = defineProps({
  data: {
    type: Object as () => ExpressionTerm,
    required: true,
  },
})

// 是否显示括号
function getBracket(array: VariableTermElement[] | undefined) {
  let flag = false
  if (array && array.length > 0) {
    array.forEach((item) => {
      if (item.type === '1' || item.type === '2') {
        flag = true
      }
    })
  }
  return flag
}
</script>

<template>
  <div class="term">
    <span class="term-symbol">{{ getSymbol(props.data.type) }}</span>
    <!-- 常量 -->
    <span v-if="getBracket(props.data.constant)" class="term-bracket">(</span>
    <span v-for="item in props.data.constant">
      <span v-if="item.text !== undefined" class="term-constant">
        <span>
          {{ getSymbol(item.type) }}{{ item.text }}<span style="font-size: 1.2rem;"><sup v-if="item.top !== '1'" class="term-sup">{{ item.top }}</sup></span>
        </span>
      </span>
    </span>
    <span v-if="getBracket(props.data.constant)" class="term-bracket">)</span>
    <!-- 变量 -->
    <span v-if="getBracket(props.data.variable)" class="term-bracket">(</span>
    <span v-for="item in props.data.variable">
      <span class="term-symbol">{{ getSymbol(item.type) }}</span>
      <span class="term-txt">
        {{ item.text }}<span style="font-size: 1.2rem;"><sub class="term-sub">{{ item.bottom }}</sub><sup v-if="item.top !== '1'" class="term-sup">{{ item.top }}</sup></span>
      </span>
    </span>
    <span v-if="getBracket(props.data.variable)" class="term-bracket">)</span>
  </div>
</template>

<style scoped lang="less">
.term {
  display: inline-flex;
  height: 40px;
  line-height: 40px;
  font-family: PingFangSC;
  font-size: 1rem;
  // 常量
  .term-constant {
    font-family: PingFangSC;
    font-size: 1rem;
  }
  // 变量
  .term-txt {
    font-family: Gabriola;
    font-size: 1.6rem;
  }
  // 次方上标
  .term-sup {
    font-family: Gabriola;
    font-size: 1rem;
  }
  // 变量下标
  .term-sub {
    font-family: PingFangSC;
    font-size: 0.6rem;
  }
  // 括号
  .term-bracket {
    font-family: PingFangSC;
    font-size: 1.2rem;
  }
  // 符号
  .term-symbol {
    font-family: PingFangSC;
    font-size: 1.2rem;
  }
}
</style>